import { defineStore } from 'pinia'
import {
  controlType,
  publicDataType,
} from '../../modules/shareCanvas/interface/canvas-types'
import { drawBase } from '@/modules/shareCanvas/index'
import {
  ControlTypeList,
  findStyleData,
} from '@/modules/shareCanvas/canvasData'
export const useCanvasStore = defineStore('canvasStore', {
  state: () => ({
    controlList: ControlTypeList as controlType[], // 绘制canvas的相关控件
    pageId: '',
    canvasWidth: 375,
    canvasHeight: 667,
    canvasPage: [] as publicDataType[],
    activeId: '', // 当前选中组件的id
    ctx: null as any, // canvas实例
    canvas: null as any, // canvas实例的dom
  }),
  actions: {
    init() {},
    //  在当前canvas页面中添加组件
    addPageComp(type: string) {
      let styleData = findStyleData(type)
      if (styleData) {
        this.canvasPage.push({
          ...styleData,
        })
        this.activeId = styleData.id
      }
    },
    async renderAll() {
      this.ctx.reset()

      let canvasPage = this.canvasPage
      // 使用for循环是为了让canvas在渲染和组件的先后顺序一致
      for (let i = 0; i < canvasPage.length; i++) {
        await drawBase(this.ctx, canvasPage[i])
      }
    },
  },
})
